<template>
    <div>
        详情主页面
        <div class="header">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="返回" name="goBack">返回</el-tab-pane>
                <el-tab-pane v-for="(tabItem,tabIndex) in tabData" :key="tabIndex" :label="tabItem.label" :name="tabItem.name">
                    <component :is="tabItem.content"></component>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Info from './Tab/Info.vue'
import Syslog from './Tab/Syslog.vue'
import Appwhitelist from './Tab/Appwhitelist.vue'
import Peripheral from './Tab/Peripheral.vue'
const activeName = ref('info')
let $router = useRouter()
const tabData = [
    {label:'基本信息',name:'info',content:Info},
    {label:'syslog日志',name:'syslog',content:Syslog},
    {label:'应用程序白名单',name:'appwhitelist',content:Appwhitelist},
    {label:'外设',name:'peripheral',content:Peripheral},
]
const handleClick = (tab) => {
    if(tab.props.name == 'goBack'){
        $router.push('/approval')
    }
}
</script>

<style lang="scss" scoped>

</style>